<!--
 * @Version: 1.0
 * @Date: 2021-04-08 19:48:26
 * @LastEditTime: 2022-01-12 18:05:10
 * @Description:
-->
<template>
  <el-card class="app-container">
    <div>
      <!-- <div class="header_title_box">
        <h2>物流异常管理</h2>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <div class="select_flex">
        <div class="operation_button_box">
          <el-button v-action="'deliveryOrder@importAbnormalLogistics'" size="small" type="primary" @click="formVisibleDown=true">导出</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            重置
          </el-button>
          <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
        </div>
      </div>

      <el-table ref="multipleTable" v-loading="loading" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
        <!-- <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" /> -->
        <!-- <el-table-column label="序号" type="index" width="55" align="center" /> -->
        <el-table-column align="center" prop="invoice_no" label="发货单号" width="155px">
          <template slot-scope="scope">
            <span class="blue pointer" @click="formVisibleInfo=true;orderId=scope.row.id+''">{{ scope.row.invoice_no }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="vi_name" label="虚拟仓库" width="155px" />
        <el-table-column align="center" prop="en_name" label="实体仓库" width="155px" />
        <el-table-column align="center" prop="order_no" label="订单编号" width="155px" />
        <el-table-column align="center" prop="goods_code" label="商品编码" width="185px" show-overflow-tooltip />
        <el-table-column align="center" prop="name_ch" label="商品名称" width="185px" show-overflow-tooltip />
        <el-table-column align="center" prop="platform_no" label="平台订单编号" width="180px" show-overflow-tooltip />
        <el-table-column align="center" prop="platform_no_ext" label="平台订单编号2" width="180px" show-overflow-tooltip />
        <el-table-column align="center" prop="status" label="审核状态" width="155px">
          <template slot-scope="scope">
            {{ scope.row.status===0?'待审核':'审核通过' }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="delivery_process_status" label="发货单状态" width="155px">
          <template slot-scope="scope">
            {{ deliveryStatua[scope.row.delivery_process_status] }}
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="delivery_process_status" sortable label="订单状态" width="155px">
          <template slot-scope="scope">
            {{ orderStatus[scope.row.delivery_state] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="deliver_day" sortable label="物流更新时间" width="165px">
          <template slot-scope="scope">
            {{ scope.row.deliver_day !== 0 ? formatLoginTime(scope.row.deliver_day) : '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="shop_name" label="店铺名称" width="155px" />
        <el-table-column align="center" prop="platform" label="平台" width="155px" />
        <el-table-column align="center" prop="number" label="发货数量" />
        <!-- <el-table-column align="center" prop="total_price" label="合计金额">
          <template slot-scope="scope">
            <app-price :price="scope.row.total_price" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="currency" label="币别" /> -->
        <el-table-column align="center" prop="shipping_name" label="物流公司" width="155px" />
        <el-table-column align="center" prop="shipping_code" label="物流单号" width="210px" show-overflow-tooltip />
        <!-- <el-table-column align="center" prop="category_name" label="分类名称" show-overflow-tooltip /> -->
        <el-table-column align="center" prop="category_name" label="分类名称" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.parent_name }}-{{ scope.row.category_name_real }}</template>
        </el-table-column>
        <el-table-column align="center" prop="address_name" label="买家姓名" show-overflow-tooltip />
        <el-table-column align="center" prop="address_email" label="买家邮箱" show-overflow-tooltip />
        <el-table-column align="center" prop="address_cityname" label="买家城市" show-overflow-tooltip />
        <el-table-column align="center" prop="address_stateorprovince" label="买家州" show-overflow-tooltip />
        <el-table-column align="center" prop="creator_name" label="创建人" width="120" show-overflow-tooltip />
        <el-table-column align="center" prop="created_at" sortable label="创建时间" width="165px" />
        <el-table-column align="center" prop="up_name" label="审核人" show-overflow-tooltip />
        <el-table-column align="center" prop="updated_at" sortable label="审核时间" width="165px" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50,100,200,500]" :page-size="queryParam.limit" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
    </div>
    <!-- 确认发货单详情 -->
    <DeliveryOrderInfo :id="orderId" :form-visible.sync="formVisible" @handleSearch="handleSearch" />
    <!-- 详情 -->
    <OrderInfo :id="orderId" :form-visible-down.sync="formVisibleInfo" />
    <!-- 拣货单 -->
    <DownModul url="/deliveryOrders/importAbnormalLogistics" :search-param="downLoadParam" :form-visible-down.sync="formVisibleDown" :titel="title" :options-modul="optionsModul" />
  </el-card>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import { lforwarderData } from '@/utils/publicData'
import DeliveryOrderInfo from '../compontent/info.vue'
import OrderInfo from '../deliveryOrder/info/index.vue'
import FormSelections from '@/components/FormSelection'
import DownModul from '@/components/DownModul/index.vue'
import { parseTime } from '@/utils'
export default {
  name: 'AbnormalLogistics',
  components: { DeliveryOrderInfo, OrderInfo, FormSelections, DownModul },
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      searchShop: 1,
      otherHeight: 395,
      secondUrl: 1, // 二级路由
      optionsModul: [
        {
          key: 'invoice_no',
          label: '发货单编号'
        },
        {
          key: 'order_no',
          label: '系统订单编号'
        },
        {
          key: 'platform_no',
          label: '平台订单编号'
        },
        {
          key: 'shipping_name',
          label: '物流公司名称'
        },
        {
          key: 'shipping_code',
          label: '物流运单号'
        },
        {
          key: 'vi_name',
          label: '虚拟仓'
        },
        {
          key: 'en_name',
          label: '实体仓'
        },
        {
          key: 'goods_code',
          label: '商品编码'
        },
        {
          key: 'name_ch',
          label: '商品中文名称'
        },
        {
          key: 'shop_name',
          label: '店铺名称'
        }
      ],
      searchClass: 1,
      searchEvName: 1,
      formItems: [
        {
          label: '物流单号',
          key: 'shipping_code',
          type: 'input',
          placeholder: '请输入物流单号'
        },
        {
          label: '发货单号',
          key: 'invoice_no',
          type: 'input',
          placeholder: '请输入发货单编号'
        },
        {
          label: '订单编号',
          key: 'order_no',
          type: 'input',
          placeholder: '请输入订单编号'
        },
        {
          label: '平台编号',
          key: 'platform_no',
          type: 'input',
          placeholder: '请输入平台编号'
        },
        // {
        //   label: '店铺名称',
        //   key: 'shop_name',
        //   type: 'input',
        //   placeholder: '请输入店铺名称'
        // },
        {
          label: '店铺',
          key: 'shop_id',
          type: 'select',
          multiple: true,
          filterable: true,
          placeholder: '请选择店铺',
          options: []
        },
        {
          label: '商品编码',
          key: 'goods_code',
          type: 'input',
          placeholder: '请输入商品编码'
        },
        {
          label: '中文名称',
          key: 'goods_name',
          type: 'input',
          placeholder: '请输入商品中文名称'
        },
        {
          label: '商品分类',
          key: 'category_ids',
          type: 'cascader',
          cLabel: 'lable',
          cValue: 'value',
          options: []
        },
        {
          label: '平台名称',
          key: 'platform_name',
          type: 'input',
          placeholder: '请输入平台名称'
        },
        {
          label: '实体仓库',
          key: 'en_name',
          // type: 'input',
          type: 'select',
          placeholder: '请输入实体仓库',
          options: []
        },
        {
          label: '订单来源',
          key: 'type',
          type: 'select',
          placeholder: '请选择订单来源',
          options: [
            {
              label: '正常订单',
              value: '1'
            },
            {
              label: '补货订单',
              value: '2'
            }
          ]
        },
        {
          label: '订单类型',
          key: 'order_delivery_type',
          type: 'select',
          placeholder: '请选择订单类型',
          options: [
            {
              label: '整单发货',
              value: '1'
            },
            {
              label: '拆分发货',
              value: '2'
            }
          ]
        },
        {
          label: '订单状态',
          key: 'delivery_state',
          type: 'select',
          options: [
            // {
            //   label: '待发货',
            //   value: '1'
            // },
            {
              label: '待打印面单',
              value: '2'
            },
            {
              label: '运输中',
              value: '3'
            },
            {
              label: '配送中',
              value: '4'
            }
            // {
            //   label: '已收货',
            //   value: '5'
            // }
          ],
          placeholder: '请选择订单状态'
        },
        {
          label: '买家州/省',
          key: 'stateorprovince',
          type: 'input',
          placeholder: '请输入买家州名'
        },
        {
          label: '买家城市',
          key: 'cityname',
          type: 'input',
          placeholder: '请输入城市'
        },
        {
          label: '买家姓名',
          key: 'user_name',
          type: 'input',
          placeholder: '请输入买家姓名'
        },
        {
          label: '买家邮箱',
          key: 'email',
          type: 'input',
          placeholder: '请输入买家邮箱'
        },
        {
          label: '创建时间',
          key: 'dateCreat',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      componentName: 'AbnormalLogistics',
      loadingFaceSheet: false,
      urlImage: '',
      id: '',
      formVisibleWlmd: false,
      formVisibleInfo: false,
      isbtn: false,
      formName: 'ruform',
      formVisibleWl: false,
      formLabelWidth: '150px',
      formFieldsData: {
        type: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ]
      },
      companyOption: [
        {
          label: 'ups',
          value: '1'
        }
      ],
      orderId: '',
      formVisible: false,
      url: '/deliveryOrder',
      queryParam: {
        logistics_type: 1,
        order_status: '2,3,4',
        delivery_state: '',
        delivery_type: '2',
        abnormal_logistics: 1,
        logistics_status: '1', // 1-成功发货订单，2-异常发货订单
        invoice_no: '',
        platform_no: '',
        order_no: '', // type=1未打印订单列表;type=2异常发货订单列表;type=3异常物流处理列表【*必带参数】
        limit: 50,
        deliver_type: 0 // 0-自有发货
      },
      fiftyLimit: 50,
      defaultQueryParam: ['type', 'delivery_type', 'order_status', 'logistics_type', 'deliver_type'],
      //  0未确认发货单，1以确认发货单，2获取物流单号，3打印物流面单
      // delivery_process_status
      deliveryStatua: {
        0: '未确认发货单',
        1: '已确认发货单',
        2: '已获取物流单号',
        3: '已打印物流面单'
      },
      orderStatus: {
        1: '待发货',
        2: '待打印面单',
        3: '运输中',
        4: '配送中',
        5: '已收货',
        6: '作废'
      }
    }
  },
  computed: {
    downLoadParam() {
      const params = {}
      const object = this.queryParam
      for (const key in object) {
        if (Object.hasOwnProperty.call(object, key)) {
          const element = object[key]
          params[key] = element
        }
      }
      return params
    }
  },
  created() {
    lforwarderData().then((data) => {
      this.companyOption = data.map((arr) => {
        arr.value = arr.id + ',' + arr.name
        return arr
      })
    })
  },
  methods: {
    formatLoginTime(time) {
      return parseTime(time)
    },
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      vm.queryParam.shop_ids = ''
      if (vm.queryParam.shop_id && vm.queryParam.shop_id.length > 0) {
        vm.queryParam.shop_ids = vm.queryParam.shop_id.join(',')
      }
      // 生成日期转化
      if (vm.queryParam.dateCreat && vm.queryParam.dateCreat.length > 0) {
        // const [start_at_creat, end_at_creat] = vm.queryParam.dateCreat
        vm.queryParam.start_at = vm.queryParam.dateCreat[0]
        vm.queryParam.end_at = vm.queryParam.dateCreat[1]
      }
      if (vm.queryParam.category_ids && vm.queryParam.category_ids.length > 0) {
        // vm.queryParam.category_id = vm.queryParam.category_ids.pop()
        const arr = vm.queryParam.category_ids
        vm.queryParam.category_id = arr[arr.length - 1]
      } else {
        vm.queryParam.category_id = ''
      }
    },
    submitFormPrint() {
      this.isbtn = true
      this.$http.post(`/deliveryPrintLabel`, { deliver_id: [this.id] }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('面单打印成功')
          this.isbtn = false
          this.handleCancelWlmd()
          this.handleSearch()
        }
      }).catch(() => {
        this.isbtn = false
      })
    },
    // 获取面单
    deliveryGetLabel(id) {
      this.id = id
      this.formVisibleWlmd = true
      this.loadingFaceSheet = true
      this.$http.post(`/deliveryGetLabel`, { deliver_id: [id] }).then((res) => {
        this.urlImage = process.env.VUE_APP_BASE_API + res.data[0]
        this.loadingFaceSheet = false
      }).catch(() => {
        this.loadingFaceSheet = false
      })
    },
    handleCancelWlmd() {
      this.formVisibleWlmd = false
    },
    // 获取运单号
    deliveryUps() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          const data = {}
          data.invoice_no = this.selectedCodes
          data.shipping_id = this.formFieldsData.type.id
          data.shipping_name = this.formFieldsData.type.name
          this.$http.post(`/deliveryUps`, data).then((res) => {
            if (res.code === 10000) {
              this.$message.success('获取运单号成功')
              this.isbtn = false
              this.handleCancelWl()
              this.resetFormFields()
              this.handleSearch()
            }
          }).catch(() => {
            this.isbtn = false
          })
        } else {
          return false
        }
      })
    },
    handleCancelWl() {
      this.formVisibleWl = false
      this.selectedCodes = []
    },
    // 设置禁止选择项
    checkSelectable(row, index) {
      return (row.delivery_process_status === 1) && row.status === 1
    }

  }
}
</script>

<style lang="scss" scoped>
.imag_rote {
  height: 240px;
  width: 420px;
  transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg); /* Internet Explorer */
  -moz-transform: rotate(90deg) !important; /* Firefox */
  -webkit-transform: rotate(90deg) !important; /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
  position: absolute;
  top: 73px;
  left: 146px;
}
</style>
